<template>
    <Layout>
        <Form ref="form1" :model="dataToQuery" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label='问题类别：' prop='problemCategory'>
                        <Select v-model="dataToQuery.problemCategory" clearable>
                            <Option v-for="item in dictMap.problemCategorys" :value="item.codingCodeId"
                                    :key="item.codingCodeId">{{ item.codingName }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='所在区域：' prop='attriErea'>
                        <Select v-model="dataToQuery.attriErea" clearable>
                            <Option v-for="item in areaTreeMap['0']" :value="item.value"
                                    :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true,'88')" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label='发现组织：' prop='checkLevel'>
                        <Select class='' type='text' v-model='dataToQuery.checkLevel' clearable>
                            <Option v-for="item in dictMap.checkLevels" :value="item.codingCodeId" :key="item.codingCodeId">{{item.codingName }}
                            </Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="检查时间：" prop="content">
                        <DatePicker class="query-form-el" v-model="dataToQuery.checkTimeRange" format="yyyy-MM-dd"
                                    type="daterange" placement="bottom-start" placeholder="请选择检查时间段"
                                    @on-change="(date) => onSelectFieldQueryDateRange(date, 'checkTime')"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" offset="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button type="primary" class="ivu-btn-add" icon="md-cloud-download" @click="exportFormSubmit">导出
                    </Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows' :loading='pageStatus.loading' border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator/>
            </Col>
        </Row>

    </Layout>
</template>

<script>
    import { mapState, mapGetters, mapActions } from 'vuex'
    import {Api} from '@/api/index.js'
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '@/common/cacheUtils.js';

    var cascaderDom = () => import('@/components/cascader-dom.vue');

    export default {
        components: {
            cascaderDom
        },
        computed: {
            ...mapState('trhg', {
                areaMap: state => state.area.areaMap ? state.area.areaMap : [],
                areaTreeMap: state => state.area.areaTreeMap ? state.area.areaTreeMap : {},
            }),
        },
        data() {
            return {
                ...this.createCommonDataField(),
                columns1: [
                    {title: '序号', width: 65, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    // { key:'companyName',title: '单位名称',  align: 'center', minWidth: 120,  },
                    { key:'problemCategoryName',title: '问题类别',  align: 'center', minWidth: 120,  },
                    { key:'attriEreaName',title: '归属地区',  align: 'center', minWidth: 120,  },
                    { key:'checkTime',title: '问题发现时间',  align: 'center', minWidth: 120,  render: this.renderCellDate },
                    { key:'checkLevelName',title: '问题发现组织',  align: 'center', minWidth: 120,  },
                    { key:'problemDesc',title: '问题描述',  align: 'center', minWidth: 120, tooltip: true },
                ],
                tableHeight: 10,
                // api
                queryUrl: Api.queryProPublicity,
                exportUrl: Api.exportProPublicity,

                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
                dictMap: {},
            }
        },
        async mounted() {
            this.setTableHeight();
            await this.$store.dispatch('trhg/area/query', {scope:this}, { root: true })
            await this.$http.get(Api.queryDictBycode+"IGC-000001,NOT-00006",{}).then((res)=>{
                this.dictMap = {
                    'checkLevels': res.data.data['IGC-000001'],
                    'problemCategorys': res.data.data['NOT-00006'],
                }
            })
            this.query();
        },
        methods: {
            ...pageCommonFunction,

            query() {
                this.dataToQuery.accountType = this.$route.query.id
                this.queryAjax();
            },

        },
        watch: {},
    }
</script>

<style lang='css' scoped>
    .ivu-form-item {
        padding-right: 20px;
    }

    .query-form-el, .ivu-date-picker, .ivu-input-wrapper {
        width: 100%;
    }

    .demo-upload-list{
        display: inline-block;
        width: 70px;
        height: 70px;
        text-align: center;
        line-height: 70px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
